<template>
  <div>
    <div v-if="loading" class="w-[100%] flex justify-center items-center min-h-[500px]">
      <Spin />
    </div>
    <template v-if="!loading">
      <div class="h-[50px] header-box">
        <LeftOutlined @click="goBlack" class="header-icon" />
        <span class="title">{{ title }}</span>
      </div>
      <div v-for="(desc, index) in descriptions" :key="index" style="margin-bottom: 10px">
        <Descriptions :title="desc.title" :column="column || 3" bordered>
          <DescriptionsItem v-for="(item, idx) in desc.items" :key="idx" :label="item.label" :span="item.span || 1">
            {{ item.content || '-' }}
          </DescriptionsItem>
        </Descriptions>
      </div>

    </template>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, type PropType } from 'vue';
import { Descriptions, DescriptionsItem, Spin } from 'ant-design-vue';
import type { Breakpoint } from 'ant-design-vue/es/_util/responsiveObserve';
import { LeftOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter()

defineProps({
  descriptions: {
    type: Array as PropType<Description[]>,
    required: true
  },
  column: {
    type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
    default: 3 // 默认每行显示 3 列
  },
  title: {
    type: String,
    default: "详情" // 是否显示底部按钮
  },
  loading: {
    type: Boolean,
    default: false // 是否显示底部按钮
  },
});

const goBlack = () => {
  router.go(-1)
}



// 定义类型
interface DescriptionItem {
  label: string;
  content: any;
  span?: number; // 每个项的跨度
}

export interface Description {
  title: string;
  items: DescriptionItem[];
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px dashed #d6d3d3;
  margin-bottom: 10px;

  .header-icon {
    font-size: 20px;
    cursor: pointer;

    &:hover {
      color: blue;
    }
  }

  .title {
    font-size: 16px;

  }
}
</style>
